<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>密码修改</p>
		</header>
		<!-- 表单部分 -->
		<ul class="form-box">
			<li>
				<div class="title">
					用户名：
				</div>
				<div class="content">
					<!-- <input v-model="user.userName" type="text" placeholder="用户名"> -->
					{{user.userName}}
				</div>
			</li>
			<li>
				<div class="title">
					原密码：
				</div>
				<div class="content">
					<input v-model="user.password" type="password" placeholder="密码">
				</div>
			</li>
			<li>
				<div class="title">
					新密码：
				</div>
				<div class="content">
					<input v-model="user.newPassword" type="password" placeholder="确认密码">
				</div>
			</li>
			<li>
				<div class="title">
					确认密码：
				</div>
				<div class="content">
					<input v-model="user.rePassword" type="password" placeholder="确认密码">
				</div>
			</li>
		</ul>
		<div class="button-login">
			<button @click="updatePwd">修改</button>
		</div>
		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
	name: 'Register',
	components: {
		Footer
	},
	data() {
		return {
			user: {
				userId: '',
				userName: '',
				password: '',
				newPassword: '',
				rePassword: ''
			}
		}
	},
	created() {
		let user = this.$sessionGet();
		if (user != null) {
			this.getUserById(user.userId);
		}
	},
	methods: {
		// 获取用户信息
		getUserById: function (userId) {
			let that = this;
			let url = 'UserController/getUserById';
			this.$axios.post(url, this.$qs.stringify({ userId }))
				.then(resp => {
					let user = resp.data;
					that.user.userId = user.userId;
					that.user.userName = user.userName;
				})
				.catch(err => {
					console.log(err);
				})
		},
		async updatePwd() {
			let user = this.user;
			// 1. 输入是否为空
			if (user.password.trim() == '' ||
				user.newPassword.trim() == '' ||
				user.rePassword.trim() == '') {
				alert("输入不能为空!");
				return;
			}
			// 2. 去掉输入前后的空格
			user.password = user.password.trim();
			user.newPassword = user.newPassword.trim();
			user.rePassword = user.rePassword.trim();

			// 3. 检查原密码是否一致
			let url1 = 'UserController/isSameOldPwd';
			let resp = await this.$axios.post(url1,this.$qs.stringify({
				userId: user.userId,
				password: user.password
			}))
			if(resp.data == 0){
				alert("所输与原密码不一致!");
				return;
			}
			// 4. 检查两次密码输入是否一致
			console.log('newPassword:  '+user.newPassword);
			console.log('rePassword:  '+user.rePassword);
			if (user.newPassword != user.rePassword) {
				alert("两次密码输入不一致!");
				return;
			}

			// 5. 提交表单,注册账号
			let url2 = 'UserController/updatePwd';
			let {data} = await this.$axios.post(url2, this.$qs.stringify({
				userId: user.userId,
				password: user.newPassword
			}));
			// 注册成功 则带着注册的账号密码跳转到登陆页面
			if (data == 1) {
				this.$router.go(-1);
			}
		}
	}

}
</script>

<style scoped="scoped">
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
}

.wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
	display: flex;
	align-items: center;
}

.wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}

.wrapper .form-box li .content {
	flex: 1;
}

.wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;
}

.wrapper .button-login {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38CA73;
	border-radius: 4px;
	border: none;
	outline: none;
}

.wrapper .button-register {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #666;
	background-color: #EEE;
	border-radius: 4px;
	border: none;
	outline: none;
	border: solid 1px #DDD;
}
</style>
